<template>
  <div style="width: 80%;margin-left: 10%">
    <Row>
      <router-link to="/DocumentCenter"><h2 class="ui center aligned centered icon header">Document center</h2></router-link>
    </Row>
    <Table :loading="documentDataLoading" border :columns="documentDataTable" :data="documentData.slice(0,10)"
           width="100%!important" v-on:on-row-click="click_row"></Table>
  </div>
</template>

<script>
  export default {
    name: "simpleDocCenter",
    data() {
      return {
        documentDataTable: [
          {title: 'Title', key: 'docName', sortable: true},
          {title: 'Description', key: 'docDesc', sortable: true},
          {title: 'DocPath', key: 'docPath', sortable: true},
          {title: 'Department', key: 'department', sortable: true},
          {title: 'DocTypes', key: 'docType', sortable: true},
          {title: 'DocNumber', key: 'docNumber', sortable: true},
        ],
        documentData: [],
        documentDataLoading: true
      }
    },
    methods: {
      loadTableData() {
        console.log("Called");
        this.$http.get('/getDocuments.form').then((response) => {
          this.documentData = response.data;
          this.documentDataLoading = false;
        })
      },
      loadTableDataWithDepar(depar) {
        this.documentDataLoading = true;
        if (depar === "Planning" || depar === "Purchasing" || depar === "MRO" || depar === "InventoryControl" || depar === "All") {
          if (depar === "All") {
            this.$http.get('/getDocuments.form').then((response) => {
              this.documentData = response.data;
              this.documentDataLoading = false;
            });
          }
          else {
            this.$http.post('/getDocByDepart.form', {
              name: depar
            }).then((response) => {
              this.documentData = response.data;
              this.documentDataLoading = false;
            })
          }
        }
        else {
          this.loading = true;
          this.$http.post('/getDocByType.form', {
            name: depar
          }).then((response) => {
            this.documentData = response.data;
            this.documentDataLoading = false;
          })
        }
      },
      click_row(row_data, index) {
        console.log(row_data, index);
        window.open(row_data.docPath);
      }
    },
    mounted() {
      this.loadTableData();

      Bus.$on('changeURL', (depar) => {
        this.loadTableDataWithDepar(depar);
      });
    }
  }

</script>

<style scoped>

</style>
